<div id="role_manage">
    <div class="table_muban">
        <el-row class="table_search">
            <el-col :span="12">
                <template>
                    <el-input
                        placeholder="请输入角色名搜索"
                        v-model.trim="parameters.inputVar"
                        @blur="roleScarchInfo"
                        clearable
                        >
                    </el-input>
                    <el-button type="primary" @click="searchFun" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
                </template>
            </el-col>
        </el-row>



        <el-row class="table_btn roleAddBox" style="margin-bottom: 0;border-bottom: 1px solid #f2f4f8;">
            <el-col :span="24" class="text-r">
                <el-button type="primary" icon="el-icon-plus" @click="addRoleData" class="addUsrtBtn">新增角色</el-button>
            </el-col>
        </el-row>

        <template>
            <el-table
                    size="mini"
                    @row-click="goRoleDetails"
                    @cell-mouse-enter="roleMouseEnterEvent"
                    v-loading="loading"
                    :data="tableData"
                    class="roleManageBox"
                    style="width: 100%">
                <el-table-column
                        align="center"
                        prop="roleName"
                        label="角色名"
                        width="250">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="createDate"
                        :formatter="getLocalTime"
                        label="创建日期"
                        width="250">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="250"
                        prop="status"
                        :formatter="getStatus"
                        label="状态">
                </el-table-column>
                <el-table-column label="操作" align="center" width="auto">
                    <template slot-scope="scope">
                        <el-button type="primary"  size="mini" @click="editRow(scope.$index, scope.row)" class="editBtn">修改</el-button>
                        <el-button type="danger"  size="mini" @click="deleteRow(scope.$index, scope.row)" class="delBtn">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页-->
            <div class="block footerBox">
                <el-pagination
                        background
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next"
                        :current-page.sync="currentPage"
                        :total="totalCount">
                </el-pagination>
            </div>
        </template>

    </div>

    <!--测试弹出框-->
    <el-dialog title="新增角色" :visible.sync="testDialogFormVisible" class="addDialog">

        <el-form
                class="add-template-form"
                :rules="rules"
                ref="form"
                :model="form"
                label-width="200px"
                :label-position="labelPosition">
            <el-checkbox v-model="checkedAllTest" @change="changeAllInfo">全选</el-checkbox>
            <br />
            <div class="checkedBoxInfo" v-for=" item in checkedData">
                <el-checkbox v-model="cheackedContainParent" :label="item.menuId" :key="item.menuName" @change="changeCheckedPId">{{item.menuName}}</el-checkbox>

                <el-checkbox-group v-model="cheackedContain"  v-for="todo in item.sysMenus" @change="changeChecked">
                    <el-checkbox  :label="todo.menuId" :key="todo.menuName" @change="changeCheckedChend" :checked="todo.checked">{{todo.menuName}}</el-checkbox>
                </el-checkbox-group>
            </div>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="testDialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="testDialogFormVisible = false">确 定</el-button>
        </div>
    </el-dialog>
    <!--新增弹出框-->
    <el-dialog title="新增角色" :close-on-click-modal="ismodalClose" :visible.sync="dialogFormVisible" class="addDialog">

        <el-form
                class="add-template-form"
                :rules="rules"
                ref="form"
                :model="form"
                label-width="200px"
                :label-position="labelPosition">

            <!--文本框模板-->
            <el-form-item label="请输入角色名称：" prop="name">
                <el-input v-model="form.name" style="width: 50%;"></el-input>
            </el-form-item>

            <!--多行文本框模板-->
            <el-form-item label="添加角色描述：" prop="desc">
                <el-input type="textarea" v-model="form.desc" style="width: 50%;"></el-input>
            </el-form-item>

            <!--多选框模板-->
        <el-form-item label="设置角色权限：">

            <el-checkbox v-model="checkedAllTest" @change="changeAllInfo">全选</el-checkbox>
            <br />
            <div class="checkedBoxInfo" v-for=" item in checkedData">
                <el-checkbox v-model="cheackedContainParent" :label="item.menuId" :key="item.menuName" @change="changeCheckedPId">{{item.menuName}}</el-checkbox>

                <el-checkbox-group v-model="cheackedContain"  v-for="todo in item.sysMenus" @change="changeChecked">
                    <el-checkbox  :label="todo.menuId" :key="todo.menuName" @change="changeCheckedChend" :checked="todo.checked">{{todo.menuName}}</el-checkbox>
                </el-checkbox-group>
            </div>

        </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="sendRoleData(form)">确 定</el-button>
        </div>
    </el-dialog>

    <!--编辑角色弹出框-->
    <el-dialog title="编辑角色" :close-on-click-modal="ismodalClose" :visible.sync="dialogEditFormVisible" class="addDialog">

        <el-form
                class="add-template-form"
                ref="editForm"
                :rules="rulesEdit"
                :model="editForm"
                label-width="200px"
                :label-position="labelPosition"
                v-loading="loadingEdit">

            <!--文本框模板-->
            <el-form-item label="请输入角色名称：" prop="roleName">
                <el-input v-model.trim="editForm.roleName" style="width: 50%;"></el-input>
            </el-form-item>

            <!--多行文本框模板-->
            <el-form-item label="添加角色描述：" prop="roleDesc">
                <el-input type="textarea" v-model.trim="editForm.roleDesc" style="width: 50%;"></el-input>
            </el-form-item>

            <!--多选框模板-->
            <el-form-item label="设置角色权限">

                <el-checkbox v-model="checkedAllTest" @change="changeAllInfo">全选</el-checkbox>
                <br />
                <div class="checkedBoxInfo" v-for=" item in checkedData">
                    <el-checkbox v-model="cheackedContainParent" :label="item.menuId" :key="item.menuName" @change="changeCheckedPId">{{item.menuName}}</el-checkbox>

                    <el-checkbox-group v-model="cheackedContain"  v-for="todo in item.sysMenus" @change="changeChecked">
                        <el-checkbox  :label="todo.menuId" :key="todo.menuName" @change="changeCheckedChend" :checked="todo.checked">{{todo.menuName}}</el-checkbox>
                    </el-checkbox-group>
                </div>

            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogEditFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="sendEditRoleData">确 定</el-button>
        </div>
    </el-dialog>
    <!--详情页单出框-->
    <el-dialog title="用户详情" v-loading="loadingDetails"  :close-on-click-modal="ismodalClose" :visible.sync="dialogDetailsFormVisible" class="dialogDetails">
        <div class="info-template-content">

            <el-row class="item-row">
                <el-col :span="5" >角色名</el-col>
                <el-col :span="19" >{{detailsForm.roleName}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="5" >角色创建时间</el-col>
                <el-col :span="19" >{{detailsForm.createDate}}</el-col>
            </el-row>
            <el-row class="item-row" >
                <el-col :span="5" >角色编码</el-col>
                <el-col :span="19" >{{detailsForm.roleCode}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="5" >状态</el-col>
                <el-col :span="19" >{{detailsForm.status}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="5" >权限功能</el-col>
                <el-col :span="19">{{detailsForm.limits}}</el-col>
            </el-row>
        </div>
    </el-dialog>
</div>
<!--[if IE]>
<script>
    goIEPage(IEVersion(),'${basePath}/roleIE9');
</script>
<![endif]-->
<script>

            var role_manage = new Vue({
                    el: "#role_manage",
                    data: {
                        loading:false,
                        loadingDetails:false,
                        loadingEdit:false,
                        ismodalClose:false,
                        checkedAllTest:'',
                        cheackedContain:[],
                        cheackedContainParent:[],
                        testDialogFormVisible:false,
                        checkedData:[],
                        isCheckedAllBtn:false,


                        menuData: [],
                        inputVar: '',
                        tableData:[],
                        labelPosition:'left',
                        dialogFormVisible: false,
                        form: {
                            name: '',
                            desc: '',

                        },
                        rules: {
                            name: [
                                { required: true, message: '请输入角色名称', trigger: 'blur' },
                                { max: 18, message: '长度在 18 个字符以内', trigger: 'blur' }
                            ],
                            desc: [
                                { required: true, message: '请添加角色描述', trigger: 'blur' },
                                { max: 100, message: '长度在 100 个字符以内', trigger: 'blur' }
                            ]
                        },
                        formLabelWidth: '120px',
                        dialogEditFormVisible: false,
                        labelPosition:'left',
                        editForm: {
                            roleName: '',
                            roleDesc: '',
                            roleid:'',
                        },
                        rulesEdit: {
                            roleName: [
                                { required: true, message: '请输入角色名称', trigger: 'blur' },
                                { max: 18, message: '长度在 18 个字符以内', trigger: 'blur' }
                            ],
                            roleDesc: [
                                { required: true, message: '请添加角色描述', trigger: 'blur' },
                                { max: 100, message: '长度在 100 个字符以内', trigger: 'blur' }
                            ]
                        },
                        formLabelWidth: '120px',
                        dialogDetailsFormVisible:false,
                        detailsForm: {
                            status:'',
                            roleName: '',
                            createDate: '',
                            roleCode: '',
                            limits: '',
                        },
                        totalCount:'',
                        totalPage:'',
                        parameters:{
                            'status':'',
                            'currentPage':'',
                            'inputVar' : '',
                            'search':'1'
                        },
                        currentPage: 1,
                        pageSize:10
                    },
                    methods: {
                        changeAllInfo:function(){
                            if(this.checkedAllTest){
//                                cheackedContain:[],
//                                    cheackedContainParent:[],
                                for(var i = 0;i<this.checkedData.length;i++){
                                    this.cheackedContainParent.push(this.checkedData[i].menuId);
                                    var chanderInfo = this.checkedData[i];
                                    for(var k = 0;k<chanderInfo.sysMenus.length;k++){
                                        this.cheackedContain.push(chanderInfo.sysMenus[k].menuId)
                                    }
                                }
                            }
                            if(this.checkedAllTest == false){
                                this.cheackedContainParent = [];
                                this.cheackedContain = [];
                            }
                        },
                        changeCheckedChend:function(e){
//                            if(e==false){
//                                for(var o = 0;o < this.checkedData.length;o++){
//                                    if(this.checkedData[o].sysMenus.length == 1){
//                                        var checkedDataId = this.checkedData[o].menuId;
//                                            for(var s = 0;s<this.cheackedContainParent.length;s++){
//                                                this.cheackedContainParent.remove(checkedDataId)
//                                            }
//
//                                    }
//                                }
//                            }
//                            if(this.cheackedContain.length == 0){
//                                this.cheackedContainParent = [];
//                            }
                        },
                        changeChecked:function(value){
                            var pVal = value;
                            var that = this;
                            var arrObjCheck=new Array();
                            for(var i = 0;i < value.length;i++){
                                var parentId = value[i].split('.')[0]+'.'+value[i].split(".")[1];
                                    arrObjCheck.push(parentId)

                            }
//                            var arr = [];
//
//                            arrObjCheck.sort()
//                            for (var z = 0; z < arrObjCheck.length;) {
//                                var count = 0;
//                                for (var j = z; j < arrObjCheck.length; j++) {
//                                    if (arrObjCheck[z] === arrObjCheck[j]) {
//                                        count++;
//                                    }
//                                }
//                                arr.push({
//                                    date: arrObjCheck[z],
//                                    count: count
//                                })
//                                z+=count;
//                            }

//                            for (var k = 0; k < arr.length; k++) {
//                                var pCheckedName=arr[k].date;
//                                var pCheckedCount = arr[k].count;
//                                    for(var h = 0;h<this.checkedData.length;h++){
//                                        if(this.checkedData[h].menuId == pCheckedName){
//                                             var pLenght = this.checkedData[h].sysMenus.length;
//                                                if(pCheckedCount == pLenght){
//                                                    this.cheackedContainParent.push(pCheckedName)
//                                                }
//                                                if( pCheckedCount != pLenght){
//                                                    var arrCheackedContainParent = this.cheackedContainParent;
//                                                    for(var b = 0;b<arrCheackedContainParent.length;b++){
//                                                        if(arrCheackedContainParent[b] == pCheckedName){
//                                                            this.cheackedContainParent.remove(arrCheackedContainParent[b]);
//                                                        }
//
//                                                    }
//
//                                                }
//
//
//                                        }
//                                    }
//                            }
                        },
                        /**
                         * 点击父标签全选子选矿
                         * */
                        changeCheckedPId:function(val,e){
                            var menuID = e.target.defaultValue;
                            var _self=this;
                            _self.checkedData.forEach(function (item,index) {
                                if(item.menuId == menuID){
                                    item.sysMenus.forEach(function (a,b) {
                                        if(val == true){
                                            _self.cheackedContain.push(a.menuId)
                                        }
                                        if(val == false){

                                            for(var j = 0;j < _self.cheackedContain.length;j++){
                                                var chenderId = _self.cheackedContain[j].split(".")[0] + '.'+_self.cheackedContain[j].split(".")[1];
                                                if(chenderId == menuID){
                                                    var indexInfo = _self.cheackedContain.indexOf(_self.cheackedContain[j]);
                                                    _self.cheackedContain.remove(_self.cheackedContain[j]);
                                                }
                                            }
                                        }

                                    })
                                }
                            })

                        },
                        sendRoleData:function (formName) {
                            var that = this;
                            if(this.form.name == "" || this.form.desc == "" || this.form.name.length > 18 || this.form.desc.length > 100){
                                this.$message({
                                    message: '填写有误，请认真核对必填项目!',
                                    type: 'warning'
                                });
                                return
                            }else if (this.cheackedContain.length == 0){
                                this.$message({
                                    message: '请选择权限!',
                                    type: 'warning'
                                });
                                return
                            }else {
                                this.loading = true;
                                this.dialogFormVisible = false;
                                for(var i = 0;i < this.cheackedContain.length;i++){
                                    this.cheackedContainParent.push(this.cheackedContain[i]);
                                }
                                var cheackArr = [];

                                    for(var z = 0;z < this.cheackedContainParent.length;z++){
                                        cheackArr.push(this.cheackedContainParent[z].split('.')[0]+'.'+this.cheackedContainParent[z].split(".")[1])
                                    }
                                    for(var j = 0;j < cheackArr.length;j++){
                                        this.cheackedContainParent.push(cheackArr[j]);
                                    }
                                    var allID = [];
                                    for(var k = 0;k<this.cheackedContainParent.length;k++){
                                        if(allID.indexOf(this.cheackedContainParent[k]) == -1){
                                            allID.push(this.cheackedContainParent[k]);
                                        }else {
                                            continue;
                                        }
                                    }
                                var roleData = allID.join(",");
                                var options5={
                                    roleName:this.form.name,
                                    descb:this.form.desc,
                                    rolemenuId:roleData

                                };
                                sendService('${basePath}/merchant/mcrole/saveUpdateRole', options5, function (resData) {
                                    if(resData.status == 'success'){
                                        that.loading = false;
                                        that.$message({
                                            type: 'success',
                                            message: resData.msg
                                        });
                                        reloadPage('${basePath}merchant/role/getToRolelistPage');
                                        that.cheackedContainParent = [];
                                        that.cheackedContain = [];
                                    }else {
                                        that.loading = false;
                                        that.$message.error(resData.msg);
                                        reloadPage('${basePath}merchant/role/getToRolelistPage');
                                        that.cheackedContainParent = [];
                                        that.cheackedContain = [];
                                    }
                                });
                            }

                            if (this.$refs[formName]!==undefined) {
                                this.$refs[formName].resetFields();
                            }
                            that.cheackedContainParent = [];
                            that.cheackedContain = [];
                        },
                        sendEditRoleData:function () {
                            var that = this;
                            if(this.editForm.roleName == "" || this.editForm.roleDesc == "" || this.editForm.roleName.length >18 || this.editForm.roleDesc.length > 100){
                                this.$message({
                                    message: '填写有误，请认真核对必填项目!',
                                    type: 'warning'
                                });
                                return
                            }else if(this.cheackedContain.length == 0){
                                this.$message({
                                    message: '请选择权限!',
                                    type: 'warning'
                                });
                                return
                            }else {
                                this.loading = true;
                                this.dialogEditFormVisible = false;
                                for(var i = 0;i < this.cheackedContain.length;i++){
                                    this.cheackedContainParent.push(this.cheackedContain[i]);
                                }
                                var cheackArr = [];

                                for(var z = 0;z < this.cheackedContainParent.length;z++){
                                    cheackArr.push(this.cheackedContainParent[z].split('.')[0]+'.'+this.cheackedContainParent[z].split(".")[1])
                                }
                                for(var j = 0;j < cheackArr.length;j++){
                                    this.cheackedContainParent.push(cheackArr[j]);
                                }
                                var allID = [];
                                for(var k = 0;k<this.cheackedContainParent.length;k++){
                                    if(allID.indexOf(this.cheackedContainParent[k]) == -1){
                                        allID.push(this.cheackedContainParent[k]);
                                    }else {
                                        continue;
                                    }
                                }
                                //var roleData = allID.join(",");

                                var editStr = allID.join(",");

                                var options6={
                                    roleName:this.editForm.roleName,
                                    descb:this.editForm.roleDesc,
                                    roleId:this.editForm.roleid,
                                    rolemenuId:editStr
                                };
                                sendService('${basePath}/merchant/mcrole/saveUpdateRole', options6, function (resData) {
                                    if(resData.status == 'success'){
                                        that.loading = false;
                                        that.$message({
                                            type: 'success',
                                            message: resData.msg
                                        });
                                        that.cheackedContainParent = [];
                                        that.cheackedContain = [];
                                        reloadPage('${basePath}merchant/role/getToRolelistPage');
                                    }else {
                                        that.loading = false;
                                        that.$message.error(resData.msg);
                                        that.cheackedContainParent = [];
                                        that.cheackedContain = [];
                                        reloadPage('${basePath}merchant/role/getToRolelistPage');
                                    }
                                });
                                this.cheackedContain=[];
                                this.cheackedContainParent=[];
                            }


                        },

//----------------------------------------------------------------------------------------------------
                        handleCurrentChange: function(currentPage){

                            Pagesearch(this,'${basePath}/merchant/role/getRolelistPage', this.parameters,currentPage,function (resData) {
                                if(resData.status == 'success'){
                                    this.tableData = resData.t;
                                }
                            });
                        },
                        goRoleDetails:function(row, event, column){
                            this.loadingDetails = true;
                            var that = this;
                            if(column.label != '操作'){
//                                $(".main-right").empty();
//                                $(".main-right").load('${basePath}/merchant/role/toRoleDetial');
                                    this.dialogDetailsFormVisible=true;
                                    this.detailsForm.status=this.getStatus(row);
                                    this.detailsForm.roleName= row.roleName;
                                    this.detailsForm.createDate= this.getLocalTime(row);
                                    this.detailsForm.roleCode= row.roleCode;
                                var options3= {
                                    roleId:row.roleId
                                };
                                sendService('${basePath}merchant/role/getRoleMenuIds', options3, function (resData) {
                                    if(resData.status == 'success'){
                                        that.detailsForm.limits = resData.t.menuNamelist.join(" , ");
                                        that.loadingDetails = false;
                                    }
                                });

                            }
                            if(column.label == '操作'){
                                return
                            }
                        },
                        roleMouseEnterEvent:function(row, event, column){
                            if(event.label == '操作'){
                                column.style.cursor="default"
                            }
                            if(event.label != '操作'){
                                column.style.cursor="pointer"
                            }
                        },
                        searchFun:function(){
                            //请求接口返回数据
                            Pagesearch(this,'${basePath}/merchant/role/getRolelistPage', this.parameters,1,function (resData) {

                                if(resData.status == 'success'){
                                    //this.tableData = resData.t;
                                    //console.log(resData)
                                }
                            });
                        },
                        roleScarchInfo:function(){
                            if(this.parameters.inputVar == ""){
                                Pagesearch(this,'${basePath}/merchant/role/getRolelistPage', this.parameters,1,function (resData) {

                                    if(resData.status == 'success'){

                                    }
                                });
                            }
                        },
                        editRow:function(index,row){
                            this.loadingEdit = true;
                            this.dialogEditFormVisible = true;
                            this.editForm.roleName = row.roleName;
                            this.editForm.roleDesc = row.descb;
                            this.editForm.roleid = row.roleId;
                            var options= {
                                roleId:row.roleId
                            };
                            sendService('${basePath}merchant/role/getRoleMenuIds', options, function (resData) {
                                if(resData.status == 'success'){
                                    console.log(resData.t)
                                        for(var i = 0;i<resData.t.list.length;i++){
                                            if(resData.t.list[i].length == 16){
                                                role_manage.cheackedContain.push(resData.t.list[i])
                                            }
                                            if(resData.t.list[i].length == 12){
                                                role_manage.cheackedContainParent.push(resData.t.list[i])
                                            }
                                        }
                                        role_manage.loadingEdit = false;
                                }
                        });
                        },
                        addRoleData:function(){
                            var that = this;
                            setTimeout(function () {
                                that.$refs['form'].resetFields();
                            },0);
                            //this.testDialogFormVisible = true;
                            this.dialogFormVisible = true;
                            this.form.name='';
                            this.form.desc='';
                            this.cheackedContain=[];
                            this.cheackedContainParent=[];
                        },
                        deleteRow:function(index, row) {
                            var that = this;
                            var indexing1 = index;
                            var delRowId = row.roleId;
                            this.$confirm('确认删除此角色吗？','提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(function () {
                                var delOption= {roleId:delRowId};
                                sendService('${basePath}/merchant/role/deleteRole', delOption, function (resData) {
                                    if(resData.status == 'success'){

                                        that.$message({
                                            type: 'success',
                                            message: resData.msg
                                        });
                                        reloadPage('${basePath}merchant/role/getToRolelistPage');
                                    }else {
                                        that.$message.error(resData.msg);
                                        reloadPage('${basePath}merchant/role/getToRolelistPage');
                                    }
                                })
                            }).catch(function () {
                                that.$message({
                                    type: 'info',
                                    message: '已取消删除'
                                });
                            })
                        },
                        getLocalTime:function (row){
                            var time = row.createDate;
                            if (time==null || time=="")
                                return "" ;
                            var currentDate = new Date(parseInt(time));
                            var currentYear = currentDate.getFullYear();
                            var currentMonth = currentDate.getMonth() + 1;
                            var currentDay = currentDate.getDate();
                            var h = currentDate.getHours();
                            var min = currentDate.getMinutes();
                            var sec = currentDate.getSeconds();
                            if (currentMonth < 10)
                            {
                                currentMonth = "0".concat(currentMonth);
                            }
                            if (currentDay < 10)
                            {
                                currentDay = "0".concat(currentDay);
                            }
                            if (h < 10)
                            {
                                h = "0".concat(h);
                            }
                            if (min < 10)
                            {
                                min = "0".concat(min);
                            }
                            if (sec < 10)
                            {
                                sec = "0".concat(sec);
                            }
                            //var  date = currentYear + "-" + currentMonth + "-" + currentDay +" " + h + ":" + min + ":" + sec ;
                            var  date = currentYear + "-" + currentMonth + "-" + currentDay;
                            return date ;
                        },
                        getStatus:function(row){
                            var status = row.status;
                           if(status == '1'){
                               return '未审核'
                           }else if(status == '2'){
                               return '正常'
                           }else if(status == '3'){
                               return '禁用'
                           }else {
                               return ''
                           }
                        },
                        isTrue:function(e){
                            console.log(e)
                        }
                    },
                    created: function () {
                        Pagesearch(this,'${basePath}/merchant/role/getRolelistPage', null,1,function (resData) {
                            if(resData.status == 'success'){
                            }
                        });
                        sendService('${basePath}/system/menu/getMenuByUrl', {}, function (resData) {
                              if(resData.status == 'success'){
                                  role_manage.checkedData = resData.t;
                              }
                          });
                    },
                    computed:{

                    }
                });
        Array.prototype.indexOf = function(value) {
            for (var i = 0; i < this.length; i++) {
                if (this[i] == value) return i;
            }
            return -1;
        };
        Array.prototype.remove = function(v) {
            var index = this.indexOf(v);
            if (index > -1) {
                this.splice(index, 1);
            }
        };
</script>
<style scoped>
    .el-table__header,.el-table__body{
        width: 100% !important;
    }
    .el-table tr{
        height: 40px;
    }
    .addUsrtBtn{
        padding: 9px 15px;
        font-size: 12px;
    }
    .roleManageBox .editBtn{
        color: #409EFF;
        background-color: transparent;
        border-color: transparent;
        padding: 4px 10px;
    }
    .roleManageBox .editBtn:hover{
        color: #fff;
        background-color: #409EFF;
        border-color: #409EFF;
    }
    .roleManageBox .delBtn{
        color: #fa5555;
        background-color: transparent;
        border-color: transparent;
        padding: 4px 10px;
    }
    .roleManageBox .delBtn:hover{
        color: #fff;
        background-color: #fa5555;
        border-color: #fa5555;
    }
    .table_search .roleAddBox{
        margin-bottom: 0;
        border-bottom: 1px solid #f2f4f8;
    }
    .table_search, .table_btn{
        height: 60px;
        margin-bottom: 10px;
        background: #fff;
        padding: 10px 20px 30px;
    }
    .el-input{
        width: auto;
    }
    .el-table::before{
        height: 0;
    }
    .text-r{
        text-align: left;
    }
    .footerBox {
        width: 100%;
        height: 50px;
        background-color: #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 9px;
        text-align: right;
    }
    .addDialog .topNav{
        margin-left: 30px;
        margin-bottom: 20px;
    }
    .addDialog .title-template{
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        padding-left: 30px;
        margin-bottom: 10px;
        color: #333333;
        background: #ffffff;
    }
    .addDialog .add-template-form label.el-form-item__label{
        font-size: 14px;
        color: #666666;
    }
    .addDialog .add-template-form .el-form-item{
        margin-bottom: 30px;
    }
    .addDialog .add-template-form .btn-item-cancel{
        margin-left: 100px;
    }
    .addDialog .checkbox-child{
        margin-left: 50px;
    }
    .addDialog .el-dialog{
        width: 60%;
        height: 85%;
        overflow: auto;
        margin-top: 10vh !important;
    }
    .addDialog .el-form--label-left .el-form-item__label{
        text-align: right;
    }
    .addDialo .el-input{
        width: 50%;
    }
    .dialogDetails .topNav{
        margin-left: 30px;
        margin-bottom: 20px;
    }
    .dialogDetails .title-template{
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        padding-left: 30px;
        margin-bottom: 10px;
        color: #333333;
        background: #ffffff;
    }
    .dialogDetails .info-template-content{
        background: #ffffff;
    }
    .dialogDetails .item-row{
        height: 46px;
        line-height: 46px;
        font-size: 16px;
        padding-left: 50px;
    }
    .dialogDetails .item-row div:first-of-type{
        color: #666;
        text-align: left
    }
    .dialogDetails .item-row div:last-of-type{
        color: #333;
        /*padding-left: 80px*/
    }

    .dialogDetails .info-template-content .el-row:nth-child(even){
        background-color: #F8F9FB;
    }

    .dialogDetails .info-template-content .el-row:last-of-type{
        margin-bottom: 30px;
        height: auto;
    }
    .dialogDetails .el-dialog{
        overflow: hidden;
        -webkit-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        -moz-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        box-shadow: 0 0 16px rgba(0,0,0,0.5);
    }
    .el-checkbox-group{
        padding-left: 30px;
    }
    .el-checkbox-group .el-checkbox:nth-of-type(5){
        margin-left: 0px;
    }
    .errorWaring{
        color:#fa5555;
        font-size: 12px;
        line-height:1;
        padding-top: 4px;
        position: absolute;
        top: 100%;
        left: 0px;

    }
    .errorWaringSys{
        color:#fa5555;
        font-size: 12px;
        line-height:1;
        padding-top: 4px;
        position: absolute;
        top: 10px;
        left: 75px;
    }
    .checkedBoxInfo .el-checkbox-group{
        display: inline-block;
    }
    .checkedBoxInfo .el-checkbox{
        display: block;
    }


    .el-dialog__header{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255,68,68,1);
        width: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        background-color: #fff;
    }
    .el-dialog__headerbtn .el-dialog__close{
        color: #ff4444;
        font-size: 22px;

    }
    .el-dialog__body{
        padding-top: 75px;
    }
    .dialogDetails .el-dialog__body{
        padding: 50px 0 0 0 ;
    }
</style>
